<%@page import="cn.edu.hpu.entity.Contact"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE HTML>
<html>
	<head>
		<title></title>
		<script type="text/javascript" src="bootstrap/jquery.js"></script>
		<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" />
		
		<style type="text/css">
			body{
				background-image:url("bootstrap/backgroundimg.png");
				font-family:"微软雅黑";
			}
			.div1{
				width:600px;
				height:auto;
				border:1px,soild,#DDDDDD;
				margin-top:10px;
				margin-left:20px;
				
			
			}
			.wall{
				 
				border: 1px solid #DDDDDD;
				border-style: none solid solid;
				border-width: medium 1px 1px;
				padding: 15px;
				background-color:white;
			}
			.div2{
				float:left;
			}
			.div3{
				float:right;
				margin-left:10px;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0">
				<li class="active">
					<a href="Prod.jspx?method=task"><i class="icon-user"></i>联系人</a>
				</li>
			</ul>
			<div class="wall">
				<div class="row">
					<div class="div2">
						<a href="prod.jspx?method=new_contact" class="btn span2"><i class="icon-plus"></i>添加联系人</a>
						<div class="clear"></div>
						<ul class="unstyled" style="margin-top:15px">
						<!--需要做联系人的循环-->
						<c:forEach items="${clist }" var="c">
							<li style="line-height:30px">
								<i class="icon-list-alt"></i><a href="prod.jspx?method=acontact&cid=${c.cid }" id="cname">${c.cname}</a>
							</li>
						</c:forEach>
						</ul>

					</div>
	
					<div class="div3" style="min-height:400px;border-left:1px solid #ccc;padding-left:15px">
						
						<address id="address">
							
							<!-- <h3>姓名:${c.cname }</h3>

							<p>公司：${c.ccompany}</p>

							<small>手机</small> ${c.cmobile}<br/>

							<small>固话</small> ${c.cphone}<br/><br/>

							<small>邮箱</small> ${c.cmail}<br/>

							<small>地址</small> ${c.caddress}<br/><br/>

							<small>主页</small> <a href="#">${c.cweb}</a><br/>

							<small>微博</small> <a href="#">${c.cblog}</a><br/>
							 -->
						</address>
						
						<div class="line">记录</div>
						<!--需要对记录做循环-->
						<c:forEach items="${cnlist }" var="cn">
							<blockquote>

						  		${cn.cncontent}
						  		<small>${cn.eid}发布于 ${cn.cnctime}</small>

							</blockquote>
						</c:forEach>

						<a href="prod.jspx?method=contact_note&id=${c.cid }">查看所有记录</a><br/>
						<div id="img">
							 <img src="https://chart.googleapis.com/chart?cht=qr&chs=150x150&choe=UTF-8&chld=L|4&chl=${c.cid }" width="150" height="150" alt="QR 码" />
						</div>
						 	
						
							
						<br/><br/><br/>

						<a class="btn btn-primary" href="prod.jspx?method=edit_contact&cid=${c.cid }"><i class="icon-pencil icon-white"></i>编辑</a>

						<a class="btn btn-danger" href="prod.jspx?method=cdelete&id=${c.cid }"><i class="icon-trash icon-white"></i>删除</a>

					</div>

			
				</div>
			</div>

		</div>
		<script type="text/javascript">
			 $(document).ready(function(){
				$("#cname").click = function(){
					$.get("prod.jspx?method=acontact&cid=${c.cid }",function(json){
						$("#address").append($("<h3>姓名:"+json.cname+"</h3>"));
						$("#address").append($("<p>公司："+json.ccompany+"</p>"));
						$("#address").append($("<small>手机</small>"+json.cmobile+"<br/>"));
						$("#address").append($("<small>固话</small>"+json.cphone+"<br/><br/>"));
						$("#address").append($("<small>邮箱</small>"+json.cmail+"<br/>"));
						$("#address").append($("<small>地址</small>"+json.caddress+"<br/><br/>"));
						$("#address").append($("<small>主页</small> <a href='#'>"+json.cweb+"</a><br/>"));
						$("#address").append($("<small>微博</small> <a href='#'>"+json.cblog+"</a><br/>"));
						$("#img").append($("<img src='https://chart.googleapis.com/chart?cht=qr&chs=150x150&choe=UTF-8&chld=L|4&chl="+json.cid+"' width='150' height='150' alt='QR 码' />")); 
					});
				}
			}); 
			
		</script>
	</body>
</html>